.header-top{
  background: #f3f3f3;
}
.header-top ul{
  width: 1000px;
  margin:0 auto;
}
.header-top ul li{
  float:right;
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  padding-left:30px;
  
}
header .img{
  height: 170px;
  background: url('/public/img/field_top_min.jpg') no-repeat top left;
  background-size:cover; 
}
.header-bottom{
  background: #BFAB86;
  height: 55px;
  position: relative;
}
.nav-horizontal{
  width: 1000px;
  margin: 0 auto;
}
.nav-horizontal li{float: left;color: #fffbf0;margin-right:2px;}
.nav-horizontal li a{padding:0 20px;line-height: 55px;font-size: 18px;display: block;color:white;}
.nav-horizontal li a:hover,.index-active{
  background: #fffbf0;
  color: #000 !important;
  border-top:4px solid #f77825;
  line-height: 51px !important; 
}

.header-search{
  position: absolute;
  right:20px;
  top:50%;
  height: 40px;
  border:1px solid white;
  /* width:100px; */
  border-radius: 40px;
  line-height: 38px;
  margin-top:-20px;
  transition: width .2s linear,background .6s linear;
  background: transparent;
  overflow: hidden;
 
}
.header-search input{
  background: transparent;
  padding-left:10px;
  outline: none;
  border:0;
  width:60px;
  float: left;
  /* vertical-align: middle; */
  height: 38px;
  transition: width .6s linear;
}
.header-search i{
  font-size: 29px;
  float: right;
  cursor: pointer;
  padding-right:10px;
}
.header-search:hover{
  /* width: 150px; */
  background: white;
  border:1px solid blueviolet;
}
.header-search:hover input{
  width:120px;
}

/*首页的主体部分*/
.container{
  width:1000px;
  margin:20px auto 0;
}

.index-left{
  width:670px;
  float: left;
}
.index-right{
  width: 300px;
  float: right;
}
.carousel{
  overflow: hidden;
  width: 500px;
  height: 280px;
}
.carousel li{
  width: 500px;
  height: 280px;
  float: left;
}
.carousel li img{
  width: 500px;
  height:280px;
}

.title{
  margin-top:20px;
  padding-bottom: 15px;
  border-bottom:4px solid #db6d4c;
}
.title .right-span{font-size:12px;color:gray;}
footer{padding: 10px 0;background: #fffbf0}
footer p{text-align: center;font-size: 12px;line-height:20px;font-family: 'Arizonia', cursive;color:#737373;}
.article>li{
  padding:30px 0;
}
.my-intro{width:170px;}
.my-intro .about-me{height: 138px;margin-bottom:4px;padding:20px 10px 5px;background: #FFFFF7;border:1px solid #FFCC00;}
.about-me .name-title{font-weight: bold;font-size:18px;margin-bottom: 10px;}
.about-me .detail{font-size:12px;color:#B3BACA;letter-spacing: 2px;}
.my-intro .about-me:nth-child(2){
  background: #FAFCFD;
  border:1px solid #CCEFF5;
  margin: 0;
}
.for-bg{background: #fffbf0;}
.for-bg::before{display: table;content: ""}
.article li{border-bottom:1px solid #BFAB86;}
.article li figure{width: 25%;overflow: hidden;}
.article li:hover{background: white;}
.article li figure img{width: 100%;height: 137px;transition: all .3s linear;}
.article li figure img:hover{
  transform: scale(1.1)
}
.article li ul{width: 72%;}
.article li ul h3{margin-top:0;}
.article li ul p{font-size:12px;}
.article-action{font-size: 13px;}
.article-action span{padding-right:5px;}
.article-action span i{font-size: 13px;padding-right:2px;}
.article-action span:nth-child(1) i{color: tomato}
.article-action span:nth-child(1) a{color:#759b08;}
.article-action span:nth-child(2) i{color:#B3BACA;}
.article-action span:last-child:hover i{color:#B3BACA;}

.index-right .right-title{
  font-size:20px;
  padding:10px 0;
  border-bottom:1px solid #E6E6E6;
}
.concat{font-size:12px;margin-left:-20px;}
.concat li{float: left;padding:30px 0;margin-left:20px;}
.concat li i{font-size: 54px;}
.concat li:hover i{color:gray !important;}
.new-article{margin-top:15px;;font-size: 12px;list-style: square inside;}
.new-article a{line-height: 25px;}
.links{font-size: 12px;margin-top:20px;border: 1px solid #B3BACA;padding:10px;background: white;}
.links li{float: left;padding:0 10px;line-height: 24px;}

/*心情随笔页面*/
.mood-note li{
  padding:20px;
  margin-bottom: 10px;
  background: #fafafa;
  border:1px solid #e0e0e0;
  border-radius: 3px;
  font-size:12px;
}

.mood-note li:hover{
  background: #f4f2f2;
}
.mood-note li p{line-height: 22px;}
.mood-list{margin-top:10px;}
.mood-list li{margin-left:2px;margin-bottom:4px;width: 90px;height: 74px;float: left;text-align: center;line-height: 74px;}
.mood-list li a{display: block;font-size:12px;}

.indicator{position: absolute;left:60px;bottom:20px;}
.indicator li{float: left;margin-right: 15px;width: 12px; height: 12px;background: white;}
.indicator li.is-active{background: #db6d4c;}

/*个人归档页面*/
.archices-left{
  margin-top:30px;
}
.archices-left li{
  padding:10px;
  font-size:18px;
  color:#828282;
  background: white;
  margin-bottom:2px;
  cursor: pointer;
}
.archices-left li:last-child{
  border-bottom:2px solid #828282;
}
.archices-left li.is-active{
  background: #db6d4c;
  color:white;
}

.archices-right{
  background: url('/public/img/dian3.png') repeat-y 180px 10px;/*x,y*/
}

.archices-right li span{
  line-height: 50px;
  font-size: 14px;
  margin-left:125px;
}
/* .archices-right li span:after{

} */
.archices-right li h3{
  margin-left:164px;
  padding-left:40px;
  color:#db6d4c;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 24px;
  background:url('/public/img/jian.png') no-repeat 9px -49px;
}
.archices-right li{
  margin-bottom: 15px;
}

.archices-right li p{
  line-height: 50px;
  padding:0 20px;
  background: #fff;
  margin-left:50px;
  box-shadow:10px 7px 8px -5px #5E5E5E;
  width: 650px;
  position: relative;
  /* background:#fff url('/public/img/jian.png') no-repeat -20px -11px; */
}
.archices-right li p::before{
  content: "";
  position: absolute;
  top:50%;
  left:-10px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background:url('/public/img/jian.png') no-repeat -20px -11px;
}
/*博客留言页面*/
.msg-login{
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: 5px;
  border:1px solid #e74851;
  text-align: center;
  margin-top:30px;
  border-radius: 50%;
  color: #e74851;
  cursor: pointer;
}

.msg-input .border-l{
  height: 97px;
  background: url('/public/img/border-l.png') no-repeat ;
  float: left;
  width: 10px;
  margin-top:-9px;
}
.msg-input .border-r{
  height: 97px;
  background: url('/public/img/border-r.png') no-repeat ;
  float: right;
  width: 10px;
  margin-top:-9px;
}
.msg-input .border-t{
  background: url('/public/img/border-t.png') no-repeat 8px;
  height: 10px;
  margin-right:10px;
  /* background-size:contain; */
}
.msg-area{
  border-bottom:1px solid #e74851;
  height: 88px;
  margin:0 8px;
  padding-top:10px;
  padding-bottom:10px;
}
.msg-area textarea{
  resize: none;
  width: 99%;
  border: none;
  height: 100%;
  background: transparent;
}
.msg-area textarea:focus{
  outline: none;
}
.chat-btn {
  width: 103px;;
  height:30px;
  margin-top:20px;
  float: right;
  border: none;
  cursor: pointer;
  background: url('/public/img/post-btn-hover.png') no-repeat ;
}
.chat-btn:hover{
  /* background: rgba(0,0,0,.1); */
  opacity: .9;
}
.show-msg{
  color:#e74851;
  padding-right:30px;
  font-size: 12px;
}
.mask-login{
  position: fixed;
  top:0;
  bottom:0;
  width: 100%;
  background: rgba(0,0,0,.5);
  display: none;
}
.boke-login{
  position: absolute;
  top:50%;
  left:50%;
  height:474px;
  width: 384px;
  background: white;
  padding:20px 15px;
  border-radius: 10px;
  transform: translate(-50%,-50%);
  text-align: center;
}
.boke-login i{
  cursor: pointer;
}
.boke-login i:hover{color:blue;}

.login-title{
  border-top:1px solid #e5e5e5;
  position: relative;
}
.login-title span{
  position: absolute;
  top:-12px;
  left:50%;
  transform: translateX(-50%);
  background:white;
  padding:0 10px;
  color: #bababa;
}

.login-logos i{
  font-size: 45px;
}
.login-logos i:hover{
  opacity: .8;
}
/*通篇不使用弹性布局*/